<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 拖拽功能演示</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: white;
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.2rem;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .drag-container, .drop-container {
            flex: 1;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #6e8efb;
            border-bottom: 2px solid #a777e3;
            padding-bottom: 10px;
        }
        
        .items-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .item {
            background: white;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: move;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }
        
        .item.dragging {
            opacity: 0.6;
            transform: scale(0.95);
            border-color: #6e8efb;
        }
        
        .drop-zone {
            min-height: 300px;
            border: 3px dashed #a777e3;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            transition: all 0.3s ease;
        }
        
        .drop-zone.highlight {
            background-color: rgba(167, 119, 227, 0.1);
            border-color: #6e8efb;
            border-style: solid;
        }
        
        .instructions {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .instructions h2 {
            color: #6e8efb;
            margin-bottom: 15px;
        }
        
        .instructions ol {
            margin-left: 20px;
            line-height: 1.6;
        }
        
        .instructions li {
            margin-bottom: 10px;
        }
        
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
        }
        
        .counter {
            margin-top: 20px;
            text-align: center;
            font-weight: bold;
            color: #6e8efb;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML5 拖拽功能演示</h1>
            <p class="subtitle">拖拽下方元素到右侧区域，体验HTML5拖拽API</p>
        </header>
        
        <div class="content">
            <div class="drag-container">
                <h2 class="section-title">可拖拽元素</h2>
                <div class="items-container">
                    <div class="item" draggable="true" data-id="1">
                        <div>元素 1</div>
                    </div>
                    <div class="item" draggable="true" data-id="2">
                        <div>元素 2</div>
                    </div>
                    <div class="item" draggable="true" data-id="3">
                        <div>元素 3</div>
                    </div>
                    <div class="item" draggable="true" data-id="4">
                        <div>元素 4</div>
                    </div>
                    <div class="item" draggable="true" data-id="5">
                        <div>元素 5</div>
                    </div>
                    <div class="item" draggable="true" data-id="6">
                        <div>元素 6</div>
                    </div>
                </div>
                <div class="counter">
                    已拖拽: <span id="drag-counter">0</span> 次
                </div>
            </div>
            
            <div class="drop-container">
                <h2 class="section-title">放置区域</h2>
                <div class="drop-zone" id="drop-zone">
                    <p style="width: 100%; text-align: center; color: #888; margin: auto;">将元素拖拽到这里</p>
                </div>
                <div class="counter">
                    已接收: <span id="drop-counter">0</span> 个元素
                </div>
            </div>
        </div>
        
        <div class="instructions">
            <h2>HTML5 拖拽实现说明</h2>
            <ol>
                <li>使用 <code>draggable="true"</code> 属性使元素可拖拽</li>
                <li>处理拖拽相关事件：
                    <ul>
                        <li><strong>dragstart</strong>: 开始拖拽时触发</li>
                        <li><strong>drag</strong>: 拖拽过程中持续触发</li>
                        <li><strong>dragenter</strong>: 拖拽元素进入目标时触发</li>
                        <li><strong>dragover</strong>: 拖拽元素在目标上方时触发</li>
                        <li><strong>dragleave</strong>: 拖拽元素离开目标时触发</li>
                        <li><strong>drop</strong>: 在目标区域释放拖拽元素时触发</li>
                        <li><strong>dragend</strong>: 拖拽操作结束时触发</li>
                    </ul>
                </li>
                <li>使用 <code>dataTransfer</code> 对象在拖拽过程中传递数据</li>
            </ol>
            
            <div class="code-block">
// 获取所有可拖拽元素
const draggableItems = document.querySelectorAll('.item');
const dropZone = document.getElementById('drop-zone');
let dragCounter = 0;
let dropCounter = 0;

// 为每个可拖拽元素添加事件监听
draggableItems.forEach(item => {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragend', handleDragEnd);
});

// 放置区域事件监听
dropZone.addEventListener('dragover', handleDragOver);
dropZone.addEventListener('dragenter', handleDragEnter);
dropZone.addEventListener('dragleave', handleDragLeave);
dropZone.addEventListener('drop', handleDrop);

function handleDragStart(e) {
    // 设置拖拽数据
    e.dataTransfer.setData('text/plain', e.target.dataset.id);
    e.dataTransfer.effectAllowed = 'move';
    
    // 添加拖拽样式
    e.target.classList.add('dragging');
    
    // 更新计数器
    dragCounter++;
    document.getElementById('drag-counter').textContent = dragCounter;
}

function handleDragEnd(e) {
    // 移除拖拽样式
    e.target.classList.remove('dragging');
}

function handleDragOver(e) {
    // 阻止默认行为以允许放置
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
}

function handleDragEnter(e) {
    // 添加高亮样式
    e.preventDefault();
    dropZone.classList.add('highlight');
}

function handleDragLeave(e) {
    // 移除高亮样式
    dropZone.classList.remove('highlight');
}

function handleDrop(e) {
    e.preventDefault();
    
    // 移除高亮样式
    dropZone.classList.remove('highlight');
    
    // 获取拖拽数据
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.querySelector(`.item[data-id="${id}"]`);
    
    // 确保拖拽的元素存在且不在放置区域内
    if (draggedItem && !dropZone.contains(draggedItem)) {
        // 克隆元素并添加到放置区域
        const clonedItem = draggedItem.cloneNode(true);
        clonedItem.draggable = false; // 禁止再次拖拽
        clonedItem.style.cursor = 'default';
        
        // 移除提示文本（如果有）
        const placeholder = dropZone.querySelector('p');
        if (placeholder) placeholder.remove();
        
        // 添加到放置区域
        dropZone.appendChild(clonedItem);
        
        // 更新计数器
        dropCounter++;
        document.getElementById('drop-counter').textContent = dropCounter;
    }
}
            </div>
        </div>
    </div>

    <script>
        // 获取所有可拖拽元素
        const draggableItems = document.querySelectorAll('.item');
        const dropZone = document.getElementById('drop-zone');
        let dragCounter = 0;
        let dropCounter = 0;

        // 为每个可拖拽元素添加事件监听
        draggableItems.forEach(item => {
            item.addEventListener('dragstart', handleDragStart);
            item.addEventListener('dragend', handleDragEnd);
        });

        // 放置区域事件监听
        dropZone.addEventListener('dragover', handleDragOver);
        dropZone.addEventListener('dragenter', handleDragEnter);
        dropZone.addEventListener('dragleave', handleDragLeave);
        dropZone.addEventListener('drop', handleDrop);

        function handleDragStart(e) {
            // 设置拖拽数据
            e.dataTransfer.setData('text/plain', e.target.dataset.id);
            e.dataTransfer.effectAllowed = 'move';
            
            // 添加拖拽样式
            e.target.classList.add('dragging');
            
            // 更新计数器
            dragCounter++;
            document.getElementById('drag-counter').textContent = dragCounter;
        }

        function handleDragEnd(e) {
            // 移除拖拽样式
            e.target.classList.remove('dragging');
        }

        function handleDragOver(e) {
            // 阻止默认行为以允许放置
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
        }

        function handleDragEnter(e) {
            // 添加高亮样式
            e.preventDefault();
            dropZone.classList.add('highlight');
        }

        function handleDragLeave(e) {
            // 移除高亮样式
            dropZone.classList.remove('highlight');
        }

        function handleDrop(e) {
            e.preventDefault();
            
            // 移除高亮样式
            dropZone.classList.remove('highlight');
            
            // 获取拖拽数据
            const id = e.dataTransfer.getData('text/plain');
            const draggedItem = document.querySelector(`.item[data-id="${id}"]`);
            
            // 确保拖拽的元素存在且不在放置区域内
            if (draggedItem && !dropZone.contains(draggedItem)) {
                // 克隆元素并添加到放置区域
                const clonedItem = draggedItem.cloneNode(true);
                clonedItem.draggable = false; // 禁止再次拖拽
                clonedItem.style.cursor = 'default';
                
                // 移除提示文本（如果有）
                const placeholder = dropZone.querySelector('p');
                if (placeholder) placeholder.remove();
                
                // 添加到放置区域
                dropZone.appendChild(clonedItem);
                
                // 更新计数器
                dropCounter++;
                document.getElementById('drop-counter').textContent = dropCounter;
            }
        }
    </script>
</body>
</html>